<template>
  <div class="header-container">
    <div class="navbar">
      <!-- <hamburger :is-active="true" class="hamburger-container" /> -->
      <!-- Logo -->
      <div class="logo-container">
        <!-- <h1>Vent-Net Graph</h1> -->
        <div class="logo-wrapper">
          <img :src="logoImg" class="logo-img" width="200px" />
        </div>
      </div>
      <!-- 菜单栏 -->
      <!-- <menu-bar :menu-config="menuConfig" class="menu-container" /> -->
      <div class="h-toolbar">
        <div class="h-box">
          <!-- 文件工具栏 -->
          <div class="box-item">
            <toolbar mode="horizontal" :actions="ToolbarActions.File" />
          </div>
          <!-- 分隔符 -->
          <div class="box-item">
            <el-divider direction="vertical" />
          </div>
          <!-- 编辑工具栏 -->
          <div class="box-item">
            <toolbar mode="horizontal" :actions="ToolbarActions.Edit" />
          </div>
          <!-- 分隔符 -->
          <div class="box-item">
            <el-divider direction="vertical" />
          </div>
          <!-- 高级功能工具栏 -->
          <div class="box-item">
            <toolbar mode="horizontal" :actions="ToolbarActions.Extension" />
          </div>
          <div class="box-item">
            <el-divider direction="vertical" />
          </div>
          <div class="box-item">
            <el-dropdown size="mini" trigger="hover" @command="onCommand1">
              <el-button type="primary">
                选择集过滤
                <svg-icon icon-class="filter" />
                <!-- <i class="el-icon-caret-bottom el-icon--right"></i> -->
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="Node">只选节点</el-dropdown-item>
                <el-dropdown-item command="Link">只选分支</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>&nbsp;
            <el-dropdown size="mini" @command="onCommand2">
              <el-button type="primary">
                分支形状
                <i class="el-icon-caret-bottom el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="line">直线分支</el-dropdown-item>
                <el-dropdown-item command="arc">弧线分支</el-dropdown-item>
                <el-dropdown-item command="spline">曲线分支</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>&nbsp;
            数据显示
            <strong>:</strong>
            <el-select v-model="value" size="mini" placeholder="请选择" @change="onSelectChange">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>&nbsp;
          </div>
          <div class="box-item">
            <el-divider direction="vertical" />
          </div>
          <!-- 特色工具栏 -->
          <div class="box-item">
            <toolbar mode="horizontal" :actions="ToolbarActions.Feature" />
          </div>
          <!-- <div class="box-item">
            <el-divider direction="vertical" />
          </div>-->
        </div>
      </div>
      <div class="right-menu">
        <div class="right-menu-item">
          <screen-full />
        </div>
        <!-- 用户下拉菜单 -->
        <el-dropdown
          size="small"
          trigger="hover"
          class="avatar-container right-menu-item"
          :show-timeout="150"
          :hide-timeout="50"
        >
          <div class="avatar-wrapper">
            <img :src="avatarImg" class="user-avatar" />
            <i class="el-icon-caret-bottom" />
          </div>
          <el-dropdown-menu slot="dropdown">
            <span style="display:block;" @click="() => onAction('ocx-ui-setting')">
              <el-dropdown-item>系统设置</el-dropdown-item>
            </span>
            <span style="display:block;" @click="() => onAction('simple-test')">
              <el-dropdown-item>简单测试</el-dropdown-item>
            </span>
            <!-- <router-link to="/files">
              <el-dropdown-item>我的图纸</el-dropdown-item>
            </router-link>-->
            <!-- <el-dropdown-item divided /> -->
            <!-- <span style="display:block;" @click="onLogout">
              <el-dropdown-item>退出登录</el-dropdown-item>
            </span>-->
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import ScreenFull from '../components/screenfull'
import Toolbar from '../components/toolbar'
// import MenuBar from './menu-bar'
import StyleConfig from '../config/style'
import ActionDispatcher from '../actions/dispatcher'
import avatarImg from '@/assets/images/avatar.png'
import logoImg from '@/assets/images/logo-small.png'
import ToolbarActions from '../actions/toolbar'
import { mapActions } from 'vuex'

export default {
  components: {
    // MenuBar,
    Toolbar,
    ScreenFull
  },
  mixins: [ActionDispatcher],
  data() {
    return {
      options: [
        {
          value: 'Name',
          label: '名称'
        },
        {
          value: 'L',
          label: '长度'
        },
        {
          value: 'Q',
          label: '风量'
        },
        {
          value: 'V',
          label: '风速'
        },
        {
          value: 'RFirc',
          label: '风阻'
        },
        {
          value: 'H',
          label: '总阻力'
        },
        {
          value: 'FixQ',
          label: '固定风量'
        },
        {
          value: '',
          label: '请选择'
        }
      ],
      value: '',
      // 菜单配置
      menuConfig: StyleConfig.Menu,
      // 用户头像
      avatarImg,
      // logo图标
      logoImg,
      // 工具栏按钮数据
      ToolbarActions
    }
  },
  methods: {
    ...mapActions('editor/diagram', {
      callFunction: 'callFunction'
    }),
    onLogout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.logout()
      })
    },
    logout() {
      // this.dialogVisible = false
      this.$store.dispatch('LogOut').then(() => {
        // 跳转到首页
        this.$router.push({ path: '/' })
        location.reload() // 为了重新实例化vue-router对象 避免bug
      })
    },
    onSelectChange(val) {
      // this.$alert('您的选择: ' + val, '提示')
      // 切换显示
      this.callFunction({ sCmd: 'UpdateSecondLabel', args: val })
    },
    onCommand1(type) {
      this.callFunction({ sCmd: 'FilterSelection', args: type })
    },
    onCommand2(category) {
      // this.$message('click on item ' + category)
      // 修改所选分支的形状
      this.callFunction({ sCmd: 'SetSelectedLinkCategory', args: category })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../style/variable.scss';

.header-container {
  height: 100%;
  line-height: 36px;
  vertical-align: middle;
  overflow: hidden;
  margin: 0;
  .h-toolbar {
    float: left;
    // @extend %toolbar-color2;
    height: 36px;
    padding-left: 10px;
    // text-align: center;
    .h-box {
      width: 100%;
      height: 100%;
    }

    .box-item {
      height: 100%;
      display: inline-block;
      overflow: hidden;

      p {
        margin: 0;
      }
    }

    // .el-divider {
    //   background-color: black !important;
    // }
    .el-divider--vertical {
      vertical-align: middle !important;
      overflow: hidden !important;
      margin: 0 2px !important;
      height: 1.5em !important;
    }

    >>> .el-input--mini .el-input__inner {
      width: 85px !important;
      height: 26px;
      line-height: 28px;
    }

    .el-button--primary {
      color: #000000 !important;
      background-color: #f2f2f2 !important;
      // border-color: #f0f0f0 !important;
      border: none !important;
    }
    .el-button--small {
      padding: 0 !important;
      // font-size: 12px;
    }
    .el-icon--right {
      margin-left: 0px !important;
    }
  }

  .navbar {
    @extend %menu-bar-height;
    @extend %menu-color;
    border-radius: 0px !important;
    .logo-container {
      @extend %menu-bar-height;
      width: 200px;
      float: left;
      padding: 0 0px;
      .logo-wrapper {
        @extend %menu-bar-height;
        position: relative;
        .logo-img {
          cursor: pointer;
          padding: 3px 1px;
          @extend %menu-bar-height;
          border-radius: 10px;
        }
      }
    }
    .menu-container {
      float: left;
      margin-left: 3px;
    }

    .right-menu {
      float: right;
      height: 100%;
      margin-right: 12px;
      &:focus {
        outline: none;
      }
      // 按钮文字颜色
      // .el-button--text {
      //   color: #000000 !important;
      // }
      .avatar-container {
        @extend %menu-bar-height;
        .avatar-wrapper {
          position: relative;
          .user-avatar {
            cursor: pointer;
            width: 18px;
            height: 18px;
            border-radius: 10px;
            vertical-align: middle;
          }
          .el-icon-caret-bottom {
            display: none;
          }
        }
      }
      .right-menu-item {
        display: inline-block;
        vertical-align: middle;
        margin: 0 5px;
        height: 100%;
      }
    }
  }
}
</style>
